<template>
  <div class="home-book">
    <div
      class="home-book-header"
      v-if="showTitle"
    >{{title}}</div>
    <div class="home-book-content">
      <div
        class="home-book-row"
        v-for="(item, index) in bookData"
        :key="index"
      >
        <div
          class="home-book-col"
          v-for="(item1,index1) in item"
          :key="index1"
          :style="{ flex:'0 0 ' + (100/col) + '%'}"
        >
          <div
            class="book-wrapper"
            :style="{ flexDirection: mode === HOME_BOOK_MODE.COL?'column':'row'}"
            @click="onBookClick(item1)"
            v-if=" mode===HOME_BOOK_MODE.ROW || mode===HOME_BOOK_MODE.COL "
          >
            <ImageView :src="item1.cover"></ImageView>
            <!-- 竖着的布局 -->
            <div
              class="book-title-wrapper book-title-col"
              v-if="mode ===HOME_BOOK_MODE.COL"
            >
              <div class="book-title">{{item1.title}}</div>
            </div>
            <!-- 横着的布局 -->
            <div
              class="book-title-wrapper book-title-row"
              v-else
            >
              <div class="book-title">{{item1.title}}</div>
              <div class="book-title-author">
                <div class="book-title book-author">{{item1.author}}</div>
                <div class="book-title book-author">{{item1.categoryText}}</div>
              </div>
            </div>
          </div>
          <!-- category布局 -->
          <div
            class="book-category-wrapper"
            @click="onCategoryClick(item1)"
            v-else
          >
            <div class="category-text">{{item1.text}}</div>
            <div class="category-num">{{item1.num}}本书</div>
            <div class="category-img-wrapper">
              <div class="category-img1">
                <ImageView :src="item1.cover"></ImageView>
              </div>
              <div class="category-img2">
                <ImageView :src="item1.cover2"></ImageView>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部的按钮 -->
    <div
      class="home-book-footer"
      @click="onMoreClick"
      v-if="showBtn"
    >
      <van-button
        round
        plain
        custom-class="home-book-btn"
      >{{btnText}}</van-button>
    </div>
  </div>
</template>

<script>
import ImageView from '../base/ImageView'
import { HOME_BOOK_MODE, CATEGORY } from '@/utils/const'
export default {
  components: { ImageView },
  props: {
    title: String,
    data: {
      type: Array,
      default: []
    },
    btnText: {
      type: String,
      default: ''
    },
    row: {
      type: Number,
      default: 0
    },
    col: {
      type: Number,
      default: 1
    },
    mode: {
      type: String,
      default: HOME_BOOK_MODE.ROW
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    linearBg: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    // console.log(this.bookData)
  },
  computed: {
    HOME_BOOK_MODE () {
      return HOME_BOOK_MODE
    },
    CATEGORY () {
      return CATEGORY
    },
    bookData () {
      // 截取数据，并按照不同形式二维数组展示
      // 展示一行3列图书，返回一个1*3的二维数组
      // 展示2行2列图书，返回一个2*2的二维数组
      const { data, row, col } = this
      if (data && data.length > 0) {
        // 项data中加入新属性text，表示categoryText的中文
        data.forEach(item => {
          item.text = CATEGORY[item.categoryText.toLowerCase()]
        })
        // 一次显示的图书总数，点击换一换按钮，可换一批
        const number = row * col
        const _bookData = data.slice(0, number)
        const _bookDataRow = []
        let _row = 0
        while (_row < row) {
          _bookDataRow.push(_bookData.slice(_row * col, _row * col + col))
          _row++
        }
        return _bookDataRow
      } else {
        return []
      }
    }
  },
  methods: {
    // 更多按钮单击事件
    onMoreClick () {
      this.$emit('onMoreClick')
      console.log('onMoreClick')
    },
    // 图书点击事件
    onBookClick (e) {
      this.$emit('onBookClick', e)
      console.log('homebook-onBookClick')
    },
    async onCategoryClick (e) {
      this.$emit('onCategoryClick', e)
      // 跳转到分类下的list页面
      this.$router.push({ path: '/pages/list/main', query: { key: 'category', text: e.categoryText } })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-book {
  margin: 24rpx 18rpx 0;
  .home-book-header {
    padding-top: 10rpx;
    font-size: 42rpx;
    color: #212933;
    box-sizing: border-box;
  }
  .home-book-content {
    margin-top: 18rpx;
    .home-book-row {
      padding-top: 18rpx;
      display: flex;
      flex-flow: row nowrap;
      .home-book-col {
        padding: 0 12rpx;
        box-sizing: border-box;
        // 下面是row布局和col布局
        .book-wrapper {
          display: flex;
          .book-title-wrapper {
            &.book-title-col {
              .book-title {
                font-size: 24rpx;
                color: #212731;
                line-height: 32rpx;
                max-height: 66rpx;
                overflow: hidden;
                font-weight: 500;
                // 单词打断换行
                word-break: break-word;
              }
            }
            &.book-title-row {
              display: flex;
              flex: 0 0 50%;
              flex-direction: column;
              justify-content: space-between;
              padding: 0 0 20rpx 10rpx;
              .book-title {
                font-weight: 500;
                font-size: 28rpx;
                color: #1f1f1f;
                line-height: 36rpx;
                max-height: 72rpx;
                overflow: hidden;
                word-break: break-word;
              }
              .book-author {
                font-size: 22rpx;
                color: #868686;
                line-height: 22rpx;
                max-height: 22rpx;
              }
            }
          }
        }
        // category布局
        .book-category-wrapper {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background: #f8f9fb;
          border-radius: 20rpx;
          padding: 26rpx 0 0 16rpx;
          box-sizing: border-box;
          height: 240rpx;
          .category-text {
            font-size: 42rpx;
            color: #212832;
            line-height: 40rpx;
            width: 300rpx;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .category-num {
            font-size: 30rpx;
            color: #868686;
            line-height: 30rpx;
            margin-bottom: 30rpx;
          }
          .category-img-wrapper {
            position: absolute;
            bottom: 0;
            right: 0;
            background: red;
            .category-img1 {
              position: absolute;
              // -10的原因，不知道哪里多出来的，不加会向上飘
              bottom: -10rpx;
              right: 0;
              // height: 132rpx;
              width: 100rpx;
              z-index: 100;
            }
            .category-img2 {
              position: absolute;
              bottom: -10rpx;
              right: 50rpx;
              // height: 84rpx;
              width: 76rpx;
              z-index: 90;
            }
          }
        }
      }
    }
  }
  .home-book-footer {
    margin-top: 40rpx;
  }
}
</style>
<style lang="scss">
// 修改组件样式，要使用全局的样式表，即不加scoped
.category-img1 {
  .image-view {
    .image {
      border-radius: 0 0 20rpx 0;
    }
  }
}
.home-book-footer {
  .home-book-btn {
    width: 100%;
    font-size: 42rpx;
    line-height: 76rpx;
    height: 76rpx;
    color: #3696ef;
    margin-bottom: 10rpx;
  }
}
</style>